import React from 'react'
import { changeNav,getBizMsgcount,getSysMsgcount } from '../actions'
import { connect } from 'react-redux'
import { List,WhiteSpace,Badge } from 'antd-mobile';
import hhistory from '../history'

const toroute = ( targetroute ) => {
  hhistory.push( targetroute )
}

const Item = List.Item;
const Brief = Item.Brief;

class Msg extends React.Component {

	componentDidMount(){
	    this.props.tochangeNav({title:"消息"})
	    this.props.getBizMsgcount()
	    this.props.getSysMsgcount()
	}

	render(){
		const { allMsg } = this.props
		return(
			<div>
				<WhiteSpace size="lg" />
				<List className="my-list">
					<Item extra={ <Badge text={ allMsg.bizcount } overflowCount={999} /> }
						  arrow="horizontal" 
						  thumb={ <img style={{ width:"1rem",height:"1rem",margin:"0.2rem 0"}} src="http://tcsl-slyun-pic.oss-cn-beijing.aliyuncs.com/header/slyunGroupLogo1501059246395.png"/> }
						  onClick = { () => toroute( "/msgdetail/openbiz" ) }
						  multipleLine>
			          <span style={{fontSize:'0.30rem',color:'#666'}}>业务开通消息</span>
			        </Item>
			    </List>
			    <WhiteSpace size="lg" />
			    <List className="my-list">
			        <Item extra={ <Badge text={ allMsg.syscount } overflowCount={999} /> } 
			        	  arrow="horizontal" 
			        	  thumb={ <img style={{ width:"1rem",height:"1rem" ,margin:"0.2rem 0"}} src="http://tcsl-slyun-pic.oss-cn-beijing.aliyuncs.com/header/slyunGroupLogo1501059323949.png"/> }
			        	  onClick = { () => toroute( "/msgdetail/sysinfo" ) }
			        	  multipleLine>
			         <span style={{fontSize:'0.30rem',color:'#666666'}}>系统通知消息</span>
			        </Item>
			    </List>
			</div>
		)
	}

}

const mapStateToProps = ( state ) => ({
	allMsg:state.allMsg
})

const mapDispatchToProps = (dispatch) => ({
	tochangeNav:navobj => dispatch( changeNav( navobj ) ),
	getBizMsgcount:() => dispatch( getBizMsgcount() ),
	getSysMsgcount:() => dispatch( getSysMsgcount() )
})

export default connect( mapStateToProps,mapDispatchToProps )( Msg )